<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片轮播图效果</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
		<style type="text/css">
			body{padding-top: 50px;}
			#box{width: 800px;height: 400px;margin: 0 auto;position: relative;}
			ul,li{list-style: none;margin: 0;padding: 0;}
			#box-pics{width: 800px;height: 400px;overflow: hidden;margin: 0 auto;}
			#box-anniu{width: 800px;margin: 0 auto;margin-top: -40px;text-align: center;}
			#box-anniu>li{display: inline-block;width: 10px;height: 10px;background: #000;margin-right: 10px;border-radius: 100%;border: 4px solid #fff;cursor: pointer;}
			#box-anniu>li:last-child{margin-right:0px ;}
			#box-anniu .current{width: 18px;height: 18px;background: #f5215a;border: 0px;}
			#box:hover #prenext>li{display: block;}
			#prenext>li{width: 60px;height: 60px;background-image: url("http://jsdaima.hu-cheng.net/js/2019/12/3475/images/ad_ctr.png");position: absolute;top: 50%;transform: translateY(-50%);
			border-radius: 10px;cursor: pointer;display: none;}
			#prenext>li:first-child{background-position: center top;left: 15px;}
			#prenext>li:first-child:hover{background-position: center -120px;}
			#prenext>li:last-child{background-position: center -60px;right: 15px;}
			#prenext>li:last-child:hover{background-position: center -180px;}
		</style>
	</head>
	<body>
		<div id="box">
			<ul id="box-pics">
				<template v-for="(item,index) in piclist">
					<li class="picimg" :style="{display:item.show}"><img v-bind:src="item.url" ></li>
				</template>
			</ul>
			<ul id="box-anniu">
				<li :class="['picbtn',{'current':item.current}]" v-for="(item,index) in piclist" @click="dianji(index)"></li>
			</ul>
			<ul id="prenext">
				<li @click="pre()"></li>
				<li @click="next()"></li>
			</ul>
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:"#box",
				data:{
					currentIndex:0,
					piclist:[
						{url:"http://jsdaima.hu-cheng.net/js/2019/12/3475/images/t1.png",show:'block',current:true},
						{url:"http://jsdaima.hu-cheng.net/js/2019/12/3475/images/t2.png",show:'none',current:false},
						{url:"http://jsdaima.hu-cheng.net/js/2019/12/3475/images/t3.png",show:'none',current:false},
						{url:"http://jsdaima.hu-cheng.net/js/2019/12/3475/images/t4.png",show:'none',current:false},
					],
					keyer:"",//定时器
				},
				methods:{
					dianji(index){
						this.currentIndex=index;
						this.qiehuan(this.currentIndex);
						this.timer();
					},
					pre(){
						if(this.currentIndex>0){
							this.currentIndex--;
							this.qiehuan(this.currentIndex);
							this.timer();
						}
					},
					next(){
						if(this.currentIndex<this.piclist.length-1){
							this.currentIndex++;
						}else{
							this.currentIndex=0;
						}
						this.qiehuan(this.currentIndex)
						this.timer();
					},
					qiehuan(index){
						for(i=0;i<this.piclist.length;i++){
							if(index==i){ //显示当前索引图片和标示当前按钮
								this.piclist[i].show="block";
								this.piclist[i].current=true;
							}else{ //隐藏其他图片
								this.piclist[i].show="none";
								this.piclist[i].current=false;
							}
						}
					},
					timer(){ //开始计时
						clearInterval(this.keyer)
						this.keyer=setInterval(()=>{
							this.currentIndex++;
							if(this.currentIndex==this.piclist.length){
								this.currentIndex=0;
							}
							this.qiehuan(this.currentIndex)
						},1000)
					},
				},
				mounted(){
					this.timer();
				}
			})
		</script>
		
	</body>
</html>
